<template>
  <div>
    <mainFrame>
      <div slot='content'>
        <div class="top-title">
          台区详细信息
        </div>
        <div style="margin: 10px 0;">
          <el-button type="primary" @click="back" icon="el-icon-back">返回</el-button>
          <el-button type="primary" @click="edit(item)" icon="el-icon-edit" v-if="userRole!=2">编辑</el-button>
          <el-button type="primary" @click="del(item)" icon="el-icon-delete" v-if="userRole!=2">删除</el-button>
        </div>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">归属地</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">台区号</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">台区地点</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">在线状态</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">用户</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">IP</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.location }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.areaNo }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.address }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.status == 1 ? '在线' : '不在线' }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.user }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.IP }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">信道</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">GPRS</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">最后通讯时间</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">日召时间</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">召测时间</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">运行模式</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.channel }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.GPRS == 1 ? '有' : '无' }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.lassUpdateTime }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.callDate }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.callTime }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.mode == 1 ? '自动' : '手动' }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">平衡模式</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">变压器容量</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">负载率限值</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">不平衡度限值</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">零线电流限值</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">指令阈值</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <span v-if="item.balanceMode==0">电流</span>
              <span v-if="item.balanceMode==1">视在功率</span>
              <span v-if="item.balanceMode==2">智能平衡</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.transformerCapacity }}KVA</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.loadRateLimit }}%</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.imbalancesLimit }}%</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.neutralWireLimit }}A</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.cmdValue }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器一端口</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器一IP</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器一APN</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器二端口</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器二IP</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器二APN</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.server1Port }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.server1IP }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.server1APN }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.server2Port }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.server2IP }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.server2APN }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">CT1</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">CT2</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">CCID</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.CT1 }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.CT2 }}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">{{ item.CCID }}</div>
          </el-col>
        </el-row>
      </div>
    </mainFrame>
  </div>
</template>
<script>
import mainFrame from '@/components/mainFrame'
import utils from '../ttJs/utils.js'
export default {
  components: {
    mainFrame
  },
  data() {
    return {
      item: [],
      userRole: null
    };
  },
  mounted: function() {
    var self = this;
    self.userRole = sessionStorage.getItem('role')
    this.getInfo();
  },

  methods: {
    getInfo() {
      var self = this;
      if (utils.validateData(self.$route.query.id)) {
        var id = self.$route.query.id;
        var url = '/yitai/admin/areaInfo';
        var params = { id: id }
        var success = function(response) {
          self.item = response.info;
          self.item.callTime = self.item.callTime.substring(11);
        }
        var fail = function() {
          utils.fail('加载失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
    },
    edit(item) {
      this.$router.push({ name: 'TaiquInfo', query: { id: item.id } });
    },
    del(item) {
      var self = this;
      var event = function() {
        var params = { id: item.id }
        var url = '/yitai/admin/deleteArea';
        var success = function(response) {
          self.$message({
            message: '删除成功',
            type: 'success'
          });
          window.history.back();
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
      utils.del(event)
    },
    back() {
      window.history.back();
    }
  },
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.top-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 20px 20px;
}

.bg-purple {
  background: #d3dce6;
  font-weight: bold;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  min-height: 36px;
  padding: 5px;
}

</style>
